/**
 * @author zhangqiang
 * @date   17/7/18
 */
import React, { Component } from 'react'
import { connect } from 'react-redux'
import { Carousel, Toast, Popup, Picker, List, Switch } from 'antd-mobile'
import {
	PassAddNumber,
	FooterAlert,
	FooterAlertMask,
	FooterRegionAlertMask,
	InputItem,
	Agreement,
	PassItem,
	GuideMask
} from '../../components/home'

import {
	gdAddressData,     //广东地区数据
	nogdAddressData, //没有广东地区数据
} from '../../components/common/addressData'

//通用组件
import { Title, FootNav } from '../../components/common'
import {
	passList,
	getCategory,
	provinceList,
	defaultAddress,
	subMitForm
} from '../../actions/homeActions'

import {
	getAddAddress,
} from '../../actions/addAddressActions';

import 'style/home.scss';
import common from '../../utils/common'
import getAddressCode from '../../utils/getAddressCode'
import getFamilyCode from '../../utils/getFamilyCode'
import style from './index.scss'


class Home extends Component {
	constructor(props) {
	super(props);
	this.state = {
		visaType: 'free', //默认签注类型
		visaName: '往来港澳个人旅游再次签注(自由行)', //默认签注文字

		hkType: '',    //字体颜色
		hkName: '请选择香港签注种类',  //默认文字
		hkSelection: '', //返回后台选项参数

		amType: '',  //字体颜色
		amName: '请选择澳门签注种类',  //默认文字
		amSelection: '', //选项 1香港 2澳门 返回后台选项参数

		// szType: '',
		// szName: '',
		// personnelType: '',  //人员类别
		// personnelName: '请选择人员类别',

		isCheck: false,  //发票
		isAgree: false,  //协议

		cardId: '', //身份证号 个人自由类型
		cardIdImg: false,
		cardIdWidth: '.3rem', // 身份证号的默认宽度
		cardIdNoBlur: true, //点击删除按钮不执行失去焦点验证

		name: '', //姓名 自由类型
		nameImg: false,
		nameWidth: '.3rem', // 姓名的默认宽度
		nameNoBlur: true, //点击删除按钮不执行失去焦点验证

		creditCode: '', //信用代码  商业类型
		creditCodeImg: false,
		creditWidth: '.3rem', // 信用代码的默认宽度
		creditCodeNoBlur: true, //点击删除按钮不执行失去焦点验证

		organizationName: '', //机构名称
		organizationImg: false,
		organizationWidth: '.3rem', // 信用代码的默认宽度
		organizationNoBlur: false,

		organizationLocation: '', //机构地址

		identity: '', //身份证号   深圳类型
		identityImg: false,
		identityWidth: '.3rem', // 默认宽度
		identityNoBlur: true, //点击删除按钮不执行失去焦点验证

		socialSecurity: '', //社保号
		socialSecurityImg: false,
		socialSecurityWidth: '.3rem', // 默认宽度
		socialSecurityNoBlur: true, //点击删除按钮不执行失去焦点验证

		familyName: '请选择民族',
		familyNameType: '',

		isShowAgree: false, //协议
		selectedIndex: 0,

		registerValue: [], //户籍地址
		regionValue: [],  //商务单位组织所在地

		orgPlace: '', //组织所在地
		hkDataType: [],  //香港类型数据源
		amDataType: [],  //澳门类型数据源

		visaIndex: '',  //点击通行证签注的选项
		//personnelIndex: -1,  //人员类别

		hkIndex: -1,  //点击香港地区签注种类的选项下标
		amIndex: -1,  //点击澳门地区签注种类的选项下标
		isShowMask: false,  //清远地区mask
		emsSitesList: [] //清远地区的紧急服务地址列表

	};
	this.isChecked = this.isChecked.bind(this);
	}

	componentWillMount() {
		//获取默认地址
		this.props.dispatch(defaultAddress({}))

		//进入页面缓存赋值页面
		this.setState(
			Object.assign({}, JSON.parse(sessionStorage.getItem('cacheAllState')),
				sessionStorage.getItem('addPass') ? {    //添加通行证标记
					selectedIndex: sessionStorage.getItem('addPass') ? this.state.selectedIndex : ''
				} : {}
			)
			, () => {
				if (sessionStorage.getItem('handeListGetIntId')) {  //从办理列表页面 点击了办理下一个签注按钮，选择某一条进入标记，户籍清空, 取一次地区类别
					this.setState({
						registerValue: []
					})

					let bizIndex = this.state.visaType == 'free' ? 1 : this.state.visaType == 'again' ? 3 : this.state.visaType == 'spouse' ? 4 : this.state.visaType == 'sz' ? 5 : 0;   //如果缓存为空，取自由行
					let postData = {
						bizProvinceId: 440000,
						bizType: bizIndex   //如果缓存为空，取自由行
					}
					this.getRegionType(postData, true);  //true 不显示一年多次

					try {
						document.querySelector('.choiceColour').className = 'am-list-extra'; //字体颜色浅灰
					} catch (error) { }
				}
				if (sessionStorage.getItem('payMentGetIntId')) {   //从支付成功页标记进入回复默认值

					this.setState({
						registerValue: []
					})

					let bizIndex = this.state.visaType == 'free' ? 1 : this.state.visaType == 'again' ? 3 : this.state.visaType == 'spouse' ? 4 : this.state.visaType == 'sz' ? 5 : 0;   //如果缓存为空，取自由行
					let postData = {
						bizProvinceId: 440000,
						bizType: bizIndex   //如果缓存为空，取自由行
					}
					this.getRegionType(postData, true);  //true 不显示一年多次

					try {
						document.querySelector('.choiceColour').className = 'am-list-extra'; //字体颜色浅灰
					} catch (error) { }
					//let address = JSON.parse(sessionStorage.getItem('cacheAllState'));

					// alert(JSON.stringify(address))
					//从办理页返回会出现户籍 区不显示的问题，先直接复制
					// console.log(address.registerValue[0].split(',')[0]+address.registerValue[1].split(',')[0]+address.registerValue[2].split(',')[0])
					// document.querySelector('.choiceColour').innerHTML=address.registerValue[0].split(',')[0]+address.registerValue[1].split(',')[0]+address.registerValue[2].split(',')[0]
				}
			})


		//通行证请求 silder走马灯数据
		this.props.dispatch(passList({}, (res) => {
			if (sessionStorage.getItem('handeListGetIntId')) {  //从代办列表 继续办理下一个通行证进入
				let slideType = JSON.parse(sessionStorage.getItem('pay_data')).endorseInfoList;
				let isLookup = false;
				let isLookupArr = [];

				for (let i = 0; i < res.length; i++) {
					for (let y = 0; y < slideType.length; y++) {
						if (res[i].passCode == JSON.parse(slideType[y].endorseInfoObj).passCode) {
							isLookup = true;
							break;
						}
					}
					if (!isLookup) {
						isLookupArr.push(i);
						break;
					}
					isLookup = false;
				}
				setTimeout(() => {
					this.setState({
						selectedIndex: isLookupArr[0] == undefined ? -1 : isLookupArr[0]  //如果全部相同,滑动到添加选项
					})
				}, 0)

			}

			if (sessionStorage.getItem('handleItem')) {   //从代办列表条目 进入带入缓存
				let handLeItem = JSON.parse(sessionStorage.getItem('handleItem'));
				for (let i = 0; i < res.length; i++) {
					if (res[i].passCode == handLeItem.endorseInfoObj.passCode) {
						setTimeout(() => {
							this.setState({
								selectedIndex: i
							})
						}, 0)

					}
				}

				if (handLeItem.endorseInfoObj.type == 1) {  //个人自由行

					let res = handLeItem.endorseInfoObj;
					//times: state.hkSelection  //周期次数：1:三月一次;2:三月两次;3:三月多次;4:一年一次;5:一年两次;6:一年多次
					let hkDataType = [
						{ category: 1, times: 4, timesName: "一年一次", },
						{ category: 1, times: 5, timesName: "一年二次", },

						{ category: 1, times: 1, timesName: "三月一次", },
						{ category: 1, times: 2, timesName: "三月二次", }
					]
					if (res.birthPlace.indexOf('深圳') > -1) {
						hkDataType.splice(4, 0, { category: 1, times: 6, timesName: "一年多次", })
						// this.setState({
						// 	hkIndex: this.state.hkIndex+1     //切换的时候勾选下一个
						// })
					}
					let amDataType = [
						{ category: 2, times: 4, timesName: "一年一次", },
						{ category: 2, times: 1, timesName: "三月一次", },
					]

					let addressArr = getAddressCode.getLookUpCode(res.birthPlace);  //返回数组的形式
					this.setState({
						hkDataType: hkDataType,
						amDataType: amDataType,

						visaType: 'free', //默认签注类型
						visaName: '往来港澳个人旅游再次签注(自由行)', //默认签注文字
						visaIndex: 0,
						// registerValue: [`${res.birthPlace.split('省')[0]}省,${res.provinceId}`,
						// 								`${res.birthPlace.split('省')[1].split('市')[0]}市,${res.cityId}`,
						// 								`${res.birthPlace.split('省')[1].split('市')[1]},${res.countyId}`],

						// registerValue: [`${res.birthPlace.split('省')[0]}省,${res.provinceId}`,
						// 								`${res.birthPlace.split('省')[1].split('市')[0]}市,${res.cityId}`,
						// 								`${res.birthPlace.split('省')[1].split('市')[1]},${res.countyId}`],

						registerValue: addressArr,
						isCheck: res.needInvoice == 0 ? false : true,
						isAgree: true  //协议勾选
					})

					if (res.items.length == 1) {
						if (res.items[0].category == 1) {
							this.setState({
								hkType: true,
								hkName: res.items[0].times == 1 ? '三月一次' : res.items[0].times == 2 ? '三月二次' : res.items[0].times == 3 ? '三月多次' : res.items[0].times == 4 ? '一年一次' :
									res.items[0].times == 5 ? '一年二次' : res.items[0].times == 6 ? '一年多次' : '请选择香港签注种类',
								hkSelection: res.items[0].times, //选项
								amType: false,
								amName: '请选择澳门签注种类',
								amSelection: '', //选项 1香港 2澳门
								amIndex: -1
							})

							for (let y = 0; y < hkDataType.length; y++) {
								if (hkDataType[y].times == res.items[0].times) {
									this.setState({
										hkIndex: y
									})
								}
							}
						} else if (res.items[0].category == 2) {
							this.setState({
								amType: true,
								amName: res.items[0].times == 1 ? '三月一次' : res.items[0].times == 2 ? '三月二次' : res.items[0].times == 3 ? '三月多次' : res.items[0].times == 4 ? '一年一次' :
									res.items[0].times == 5 ? '一年二次' : res.items[0].times == 6 ? '一年多次' : '请选择澳门签注种类',

								amSelection: res.items[0].times, //选项 1香港 2澳门
								hkType: false,
								hkName: '请选择香港签注种类',
								hkSelection: '', //选项
								hkIndex: -1,
							})

							for (let i = 0; i < amDataType.length; i++) {
								if (amDataType[i].times == res.items[0].times) {
									this.setState({
										amIndex: i
									})
								}
							}

						}
					} else {
						this.setState({
							hkType: true,
							hkName: res.items[0].times == 1 ? '三月一次' : res.items[0].times == 2 ? '三月二次' : res.items[0].times == 3 ? '三月多次' : res.items[0].times == 4 ?
								'一年一次' : res.items[0].times == 5 ? '一年二次' : res.items[0].times == 6 ? '一年多次' : '请选择香港签注种类',
							hkSelection: res.items[0].times, //选项

							amType: true,
							amName: res.items[1].times == 1 ? '三月一次' : res.items[1].times == 2 ? '三月二次' : res.items[1].times == 3 ? '三月多次' : res.items[1].times == 4 ? '一年一次' :
								res.items[1].times == 5 ? '一年二次' : res.items[1].times == 6 ? '一年多次' : '请选择澳门签注种类',
							amSelection: res.items[1].times, //选项 1香港 2澳门
						})

						for (let i = 0; i < amDataType.length; i++) {
							if (amDataType[i].times == res.items[1].times) {
								this.setState({
									amIndex: i
								})
							}
						}
						for (let y = 0; y < hkDataType.length; y++) {
							if (hkDataType[y].times == res.items[0].times) {
								this.setState({
									hkIndex: y
								})
							}
						}
					}

					try {
						document.querySelector('.am-list-extra').innerHTML = res.birthPlace.replace(null, '');
						document.querySelector('.am-list-extra').className = 'choiceColour';
					} catch (e) { }

				} else if (handLeItem.endorseInfoObj.type == 3) {  //商务
					let res = handLeItem.endorseInfoObj;
					let hkDataType = [
						{ category: 1, times: 6, timesName: "一年多次", },
						{ category: 1, times: 1, timesName: "三月一次", },
						{ category: 1, times: 3, timesName: "三月多次", }
					]

					let addressArr = getAddressCode.getLookUpCode(res.orgPlace);  //返回数组的形式
					this.setState({
						hkDataType: hkDataType,
						visaType: 'again', //默认签注类型
						visaName: '往来港澳商务再次签注', //默认签注文字
						visaIndex: 1,

						isCheck: res.needInvoice == 0 ? false : true,

						cardId: res.idCardNo,
						creditCode: res.orgNbr,
						organizationName: res.orgName,

						// regionValue: [`${res.orgPlace.split('省')[0]}省,${res.provinceId}`,`${res.orgPlace.split('省')[1].split('市')[0]}市,${res.cityId}`,
						// 	`${res.orgPlace.split('省')[1].split('市')[1]},${res.countyId}`],

						// registerValue: [`${res.orgPlace.split('省')[0]}省,${res.provinceId}`,`${res.orgPlace.split('省')[1].split('市')[0]}市,${res.cityId}`,
						// 	`${res.orgPlace.split('省')[1].split('市')[1]},${res.countyId}`],
						regionValue: addressArr,
						hkType: true,
						hkName: res.items[0].times == 1 ? '三月一次' : res.items[0].times == 2 ? '三月二次' : res.items[0].times == 3 ? '三月多次' : res.items[0].times == 4 ? '一年一次' :
							res.items[0].times == 5 ? '一年二次' : res.items[0].times == 6 ? '一年多次' : '请选择香港签注种类',
						hkSelection: res.items[0].times, //选项
						isAgree: true  //协议勾选
					})

					try {
						document.querySelectorAll('.am-list-extra')[1].innerHTML = res.orgPlace.replace(null, '');
						document.querySelectorAll('.am-list-extra')[1].className = 'choiceColour';
					} catch (e) { }

					for (let i = 0; i < hkDataType.length; i++) {
						if (hkDataType[i].times == res.items[0].times) {
							this.setState({
								hkIndex: i
							})
						}
					}

				} else if (handLeItem.endorseInfoObj.type == 4) {
					let res = handLeItem.endorseInfoObj;
					let hkDataType = [
						{ category: 1, times: 1, timesName: "三月一次", },
						{ category: 1, times: 3, timesName: "三月多次", }
					]
					let amDataType = [
						{ category: 2, times: 1, timesName: "三月一次", },
						{ category: 2, times: 3, timesName: "三月多次", },
					]

					let addressArr = getAddressCode.getLookUpCode(res.birthPlace);  //返回数组的形式

					this.setState({
						hkDataType: hkDataType,
						amDataType: amDataType,
						visaType: 'spouse', //默认签注类型
						visaName: '往来港澳夫妻探亲再次签注', //默认签注文字
						visaIndex: 2,

						isCheck: res.needInvoice == 0 ? false : true,
						// registerValue: [`${res.birthPlace.split('省')[0]}省,${res.provinceId}`,`${res.birthPlace.split('省')[1].split('市')[0]}市,${res.cityId}`,
						// 							`${res.birthPlace.split('省')[1].split('市')[1]},${res.countyId}`],

						registerValue: addressArr,
						cardId: res.idCardNo,
						name: res.spouseName,
						isAgree: true  //协议勾选
					})

					if (res.items.length == 1) {
						if (res.items[0].category == 1) {
							this.setState({
								hkType: true,
								hkName: res.items[0].times == 1 ? '三月一次' : res.items[0].times == 2 ? '三月二次' : res.items[0].times == 3 ? '三月多次' :
									res.items[0].times == 4 ? '一年一次' : res.items[0].times == 5 ? '一年二次' : res.items[0].times == 6 ? '一年多次' : '请选择香港签注种类',
								hkSelection: res.items[0].times, //选项

								amType: false,
								amName: '请选择澳门签注种类',
								amSelection: '', //选项 1香港 2澳门
								amIndex: -1,
							})

							for (let i = 0; i < hkDataType.length; i++) {
								if (hkDataType[i].times == res.items[0].times) {
									this.setState({
										hkIndex: i
									})
								}
							}

						} else if (res.items[0].category == 2) {
							this.setState({
								amType: true,
								amName: res.items[0].times == 1 ? '三月一次' : res.items[0].times == 2 ? '三月二次' : res.items[0].times == 3 ? '三月多次' :
									res.items[0].times == 4 ? '一年一次' : res.items[0].times == 5 ? '一年二次' : res.items[0].times == 6 ? '一年多次' : '请选择澳门签注种类',

								amSelection: res.items[0].times, //选项 1香港 2澳门

								hkType: false,
								hkName: '请选择香港签注种类',
								hkSelection: '', //选项
								hkIndex: -1,
							})

							for (let i = 0; i < amDataType.length; i++) {
								if (amDataType[i].times == res.items[0].times) {
									this.setState({
										amIndex: i
									})
								}
							}

						}

					}

					try {
						document.querySelector('.am-list-extra').innerHTML = res.birthPlace.replace(null, '');
						document.querySelector('.am-list-extra').className = 'choiceColour';
					} catch (e) {
					}
				} else if (handLeItem.endorseInfoObj.type == 5) {
					let res = handLeItem.endorseInfoObj;
					let hkDataType = [
						{ category: 1, times: 4, timesName: "一年一次", },
						{ category: 1, times: 5, timesName: "一年二次", },
						{ category: 1, times: 1, timesName: "三月一次", },
						{ category: 1, times: 2, timesName: "三月二次", }
					]
					let amDataType = [
						{ category: 2, times: 4, timesName: "一年一次", },
						{ category: 2, times: 1, timesName: "三月一次", },
					]

					let addressArr = getAddressCode.getLookUpCode(res.birthPlace);  //返回数组的形式

					this.setState({
						hkDataType: hkDataType,
						amDataType: amDataType,

						visaType: 'sz', //默认签注类型
						visaName: '深圳非广东户籍往来港澳个人旅游再次签注', //默认签注文字
						visaIndex: 3,
						// personnelType: res.personType == 3?'college':'permit',
						// personnelName: res.personType == 3?'高校大学生':'就业人员',
						isCheck: res.needInvoice == 0 ? false : true,
						identity: res.idCardNo,
						//socialSecurity:  res.personType == 3?'':res.sbNbr, 社保号
						//familyName: res.nationName,
						//familyNameType: true,
						isAgree: true,  //协议勾选
						// registerValue: [`${res.birthPlace.split('省')[0]}省,${res.provinceId}`,`${res.birthPlace.split('省')[1].split('市')[0]}市,${res.cityId}`,
						// 								`${res.birthPlace.split('省')[1].split('市')[1]},${res.countyId}`]

						registerValue: addressArr

					})


					if (res.items.length == 1) {
						if (res.items[0].category == 1) {
							this.setState({
								hkType: true,
								hkName: res.items[0].times == 1 ? '三月一次' : res.items[0].times == 2 ? '三月二次' : res.items[0].times == 3 ? '三月多次' : res.items[0].times == 4 ? '一年一次' :
									res.items[0].times == 5 ? '一年二次' : res.items[0].times == 6 ? '一年多次' : '请选择香港签注种类',
								hkSelection: res.items[0].times, //选项
								amType: false,
								amName: '请选择澳门签注种类',
								amSelection: '', //选项 1香港 2澳门
								amIndex: -1,
							})

							for (let y = 0; y < hkDataType.length; y++) {
								if (hkDataType[y].times == res.items[0].times) {
									this.setState({
										hkIndex: y
									})
								}
							}

						} else if (res.items[0].category == 2) {
							this.setState({
								amType: true,
								amName: res.items[0].times == 1 ? '三月一次' : res.items[0].times == 2 ? '三月二次' : res.items[0].times == 3 ? '三月多次' : res.items[0].times == 4 ? '一年一次' :
									res.items[0].times == 5 ? '一年二次' : res.items[0].times == 6 ? '一年多次' : '请选择澳门签注种类',
								amSelection: res.items[0].times, //选项 1香港 2澳门
								hkType: false,
								hkName: '请选择香港签注种类',
								hkSelection: '', //选项
								hkIndex: -1,
							})

							for (let i = 0; i < amDataType.length; i++) {
								if (amDataType[i].times == res.items[0].times) {
									this.setState({
										amIndex: i
									})
								}
							}

						}
					} else {

						this.setState({
							hkType: true,
							hkName: res.items[0].times == 1 ? '三月一次' : res.items[0].times == 2 ? '三月二次' : res.items[0].times == 3 ? '三月多次' : res.items[0].times == 4 ? '一年一次' :
								res.items[0].times == 5 ? '一年二次' : res.items[0].times == 6 ? '一年多次' : '请选择香港签注种类',
							hkSelection: res.items[0].times, //选项

							amType: true,
							amName: res.items[1].times == 1 ? '三月一次' : res.items[1].times == 2 ? '三月二次' : res.items[1].times == 3 ? '三月多次' : res.items[1].times == 4 ? '一年一次' :
								res.items[1].times == 5 ? '一年二次' : res.items[1].times == 6 ? '一年多次' : '请选择澳门签注种类',
							amSelection: res.items[1].times, //选项 1香港 2澳门
						})

						for (let y = 0; y < hkDataType.length; y++) {
							if (hkDataType[y].times == res.items[0].times) {
								this.setState({
									hkIndex: y
								})
							}
						}

						for (let i = 0; i < amDataType.length; i++) {
							if (amDataType[i].times == res.items[1].times) {
								this.setState({
									amIndex: i
								})
							}
						}

					}
					try {
						document.querySelector('.am-list-extra').innerHTML = res.birthPlace.replace(null, '');
						document.querySelector('.am-list-extra').className = 'choiceColour';
					} catch (e) { }
				}
			}
		}))


		// //通过省份ID获取地址列表
		// //类型0/查询所有地区数据 1/查询某个地区数据 2/表示查询不包含某个地区的数据
		// if(sessionStorage.getItem('handleItem')){
		// 	let handLeItem = JSON.parse(sessionStorage.getItem('handleItem'));
		// 	let getData={
		// 		provinceId: 440000,
		// 		bizType: handLeItem.endorseInfoObj.type==1?1:handLeItem.endorseInfoObj.type==3?1:handLeItem.endorseInfoObj.type==4?1:2
		// 	}
		// 	this.props.dispatch(getAddAddress(getData))
		// }else {
		// 	let getData={
		// 		provinceId: 440000,
		// 		bizType: 1
		// 	}
		// 	this.props.dispatch(getAddAddress(getData))
		// }

	}

	componentDidMount() {
		common.setViewTitle('港澳通行证签注办理');
		// if(sessionStorage.getItem('handleItem')) {   //从代办列表条目 进入带入缓存
		//  alert('aaaa')
		//  Toast.loading("", 30, () => Toast.info("网络错误", 2));
		//  setTimeout(()=>{Toast.hide()},4000);//缓存添加Tost, 添加到缓存执行完成不执行Toas.hide;先这样吧
		// }

		//如果缓存有地址字体颜色改变深灰  组织所在地 **
		if (JSON.parse(sessionStorage.getItem('cacheAllState')) && JSON.parse(sessionStorage.getItem('cacheAllState')).regionValue.length) { //立即办理页，
			try {
				document.querySelectorAll('.am-list-extra')[1].className = 'choiceColour';  //组织地区深灰
			} catch (e) { }

		}

		//如果缓存有地址字体颜色改变深灰  户籍 **
		if (JSON.parse(sessionStorage.getItem('cacheAllState')) && JSON.parse(sessionStorage.getItem('cacheAllState')).registerValue.length) {
			document.querySelectorAll('.am-list-extra')[0].className = 'choiceColour';  //勾选后改变字体变深
		}

		//获得香港澳门地区签注种类
		let postData = {
			bizProvinceId: 440000,
			bizType: sessionStorage.getItem('currentIndex') || 1   //如果缓存为空，取自由行
		}

		// !sessionStorage.getItem('payMentGetIntId')||
		if (!sessionStorage.getItem('getRegionType')) {  //如果 取反说从确定支付也面返回的，
			let timesShow = this.state.registerValue.length && this.state.registerValue[1].indexOf('深圳') == -1 && postData.bizType == 1 ? false : true;  //地址不为深圳且为个人自由行
			this.getRegionType(postData, timesShow ? true : false);  //true 不显示一年多次
		}

		if (sessionStorage.getItem('scrollTop') && sessionStorage.getItem('focusAddressList')) { //进入地址页返回保存滑动的距离
			window.scrollTo(0, sessionStorage.getItem('scrollTop'));
		}


	}

	componentWillUnmount() {
		Popup.hide(); //防止用户点击弹框，点击返回弹框没有消失的bug

		//离开页面存储全局状态
		sessionStorage.setItem('cacheAllState', JSON.stringify(this.state))
		sessionStorage.removeItem('addPass')  //添加通行证标记
		sessionStorage.removeItem('handeListGetIntId'); //点击立即办理
		sessionStorage.removeItem('handleItem'); //订单列表进入首页读取
		sessionStorage.removeItem('getRegionType') //订单确认页
		sessionStorage.removeItem('focusAddressList') //地址列表进入保存滑动距离

		sessionStorage.removeItem('payMentGetIntId')
		if (!sessionStorage.getItem('cacheAllState')) {
			sessionStorage.removeItem('scrollTop'); //缓存滑动屏幕的距离  地址列表
		}

	}

	componentWillUpdate(nextProps, nextState) {

	}

	componentDidUpdate() {
		// Toast.loading("", 30, () => Toast.info("网络错误", 2));
		// setTimeout(()=>{Toast.hide()},1000);//缓存添加Tost, 添加到缓存执行完成不执行Toas.hide;先这样吧

		//586行代码有此操作
		if (this.state.visaType == 'again') {
			// 当缓存里有组织城市地和颜色已经是深灰色了，
			if (JSON.parse(sessionStorage.getItem('cacheAllState')) && JSON.parse(sessionStorage.getItem('cacheAllState')).regionValue.length && document.querySelectorAll('.am-list-extra').length) {
				try {
					document.querySelectorAll('.am-list-extra')[0].className = 'choiceColour';  //勾选后改变字体变深
				} catch (e) { }

			}
		}

		/*
		* 兼容ios点击输入框遮挡tag
		* */
		let inputAll = document.getElementsByTagName('input');
		for (let i = 0; i < inputAll.length; i++) {
			inputAll[i].onfocus = function () {
				document.querySelector('.footNav___PV7D2').style.position = 'static'
			}
			inputAll[i].onblur = function () {
				document.querySelector('.footNav___PV7D2').style.position = 'fixed'
			}
		}

	}

	//获取当前选中的车辆
	getCurrentCar(index) {
		this.setState({
			selectedIndex: index
		})
	}

	/*
	*   区分香港 澳门列表
	*   check 选择签注类别签注种类也要更新
	* */

	getRegionType(postData, type, check = false) {   //type为false显示深圳一年多次 修改签注类别check 为true

		this.props.dispatch(getCategory(postData, (res) => {
			let amData = [], hkData = [];
			for (let i = 0; i < res.length; i++) {
				if (res[i].category == 1) { //香港
					if (type) {
						if (res[i].times != 6) {
							hkData.push(res[i])  //没有一年多次*6
						}
					} else {
						hkData.push(res[i])  //有一年多次
					}
				} else {
					amData.push(res[i])  //澳门
				}
			}

			/*
			*   点击签注类别 切换地区种类，
			*   进入页面 设置默认的次数
			*   自由行和深圳给默认值
			* */
			let handLeItem = JSON.parse(sessionStorage.getItem('handleItem'));
			if (handLeItem == null) {
				if (this.state.visaType == 'free' || this.state.visaType == 'sz') { //如果缓存没有值  自由行 和 深圳

					if (this.state.amName == '请选择澳门签注种类' && this.state.hkName == '请选择香港签注种类' || check) {  //check参数再切换签注种类传参，更新选择的地区，取后台默认第一个 ，只有自由行和深圳会选第一个值
						this.setState({
							amName: amData[0] && amData[0].timesName,
							amIndex: 0,
							hkName: amData[0] && hkData[0].timesName,   //商务游不给默认值
							hkIndex: 0,
							amType: true,
							hkType: true,
							amSelection: 4,
							hkSelection: 4,
							hkDataType: hkData,  //香港数据源
							amDataType: amData  //澳门数据源
						})

					} else {
						this.setState({
							hkDataType: hkData,  //香港数据源
							amDataType: amData  //澳门数据源
						})

						for (let i = 0; i < hkData.length; i++) {   //根据本地字段和后台返回数据匹配，获得候选状态, 每次切换 香港地区有可能有一年多次，所以要动态去下标
							if (this.state.hkName == hkData[i].timesName) {
								this.setState({
									hkIndex: i
								})
							}
						}
					}


				} else {  //夫妻和深圳 不是从订单列表进入
					if (this.state.amName == '请选择澳门签注种类' && this.state.hkName == '请选择香港签注种类' || check) {
						this.setState({
							hkName: '请选择香港签注种类',
							hkIndex: -1,   //选择的下标
							hkSelection: -1, //选择的选项
							hkType: false,  //点击取消和相同的按钮字体颜色变浅，默认再次选择

							amName: '请选择澳门签注种类',
							amIndex: -1,   //选择的下标
							amSelection: -1, //选择的选项
							amType: false,  //点击取消和相同的按钮字体颜色变浅，默认再次选择

							hkDataType: hkData,  //香港数据源
							amDataType: amData  //澳门数据源
						})
					} else {
						this.setState({
							hkDataType: hkData,  //香港数据源
							amDataType: amData  //澳门数据源
						})

						for (let i = 0; i < hkData.length; i++) {   //根据本地字段和后台返回数据匹配，获得候选状态, 每次切换 香港地区有可能有一年多次，所以要动态去下标
							if (this.state.hkName == hkData[i].timesName) {
								this.setState({
									hkIndex: i
								})
							}
						}
					}


				}
			} else {  //从订单列表进入有缓存

				for (let i = 0; i < hkData.length; i++) {   //根据本地字段和后台返回数据匹配，获得候选状态
					if (this.state.hkName == '请选择香港签注种类') {
						this.setState({
							hkIndex: -1
						})
						break;
					} else if (this.state.hkSelection == hkData[i].times) {   //如果缓存的时候切换
						this.setState({
							hkIndex: i
						})
						break;
					} else if (this.state.hkSelection != hkData[i].times) {
						this.setState({
							hkIndex: i
						})
					} else if (handLeItem.endorseInfoObj.items[0].times == hkData[i].times) {
						this.setState({
							hkIndex: i
						})
						break;
					}

				}
				this.setState({
					hkDataType: hkData,  //香港数据源
					amDataType: amData  //澳门数据源
				})

				if (handLeItem && check) {  //有缓存的时候取缓存值  切换签注种类*，香港和澳门种类也动态改变

					// handLeItem.endorseInfoObj.tyep ==1||handLeItem.endorseInfoObj.type.5  应该取缓存的状态吧
					if (this.state.visaType == 'free' || this.state.visaType == 'sz') { //如果缓存有值，从订单列表进入不跟新默认值
						this.setState({
							amName: amData[0] && amData[0].timesName,
							amIndex: 0,
							hkName: amData[0] && hkData[0].timesName,   //商务游不给默认值
							hkIndex: 0,
							amType: true,
							hkType: true,
							amSelection: 4,
							hkSelection: 4,
						})
					} else {
						this.setState({
							hkName: '请选择香港签注种类',
							hkIndex: -1,   //选择的下标
							hkSelection: -1, //选择的选项
							hkType: false,  //点击取消和相同的按钮字体颜色变浅，默认再次选择

							amName: '请选择澳门签注种类',
							amIndex: -1,   //选择的下标
							amSelection: -1, //选择的选项
							amType: false,  //点击取消和相同的按钮字体颜色变浅，默认再次选择

						})
					}

				}
			}

		}))

	}

	/*
	*   选择通行证签注类别 mask
	*   name 签注名
	*   index 下标接口需要的参数
	*   check  区分签注类别 1香港 2澳门
	*   visaIndex 选择的状态
	* */
	showVisaMask() {
		let props = {
			visaIndex: this.state.visaIndex,
			type: 'visa',
			choose: (name, currentIndex, check, index) => {

				sessionStorage.setItem('currentIndex', currentIndex)  //保存选择签注类别的唯一 type

				/*
				*  切换签注类别时所有状态恢复默认值，地区取后台数据
				* */
				this.setState({
					visaName: name,
					visaType: check,
					visaIndex: index,

					registerValue: [],  //从个人游到夫妻游 户籍清空颜色变浅会
					regionValue: [],  //组织地清空

					cardId: '', //身份证号 自由类型
					cardIdImg: false,
					cardIdWidth: '.3rem', // 身份证号的默认宽度
					cardIdNoBlur: true, //点击删除按钮不执行失去焦点验证

					name: '', //姓名 自由类型
					nameImg: false,
					nameWidth: '.3rem', // 姓名的默认宽度
					nameNoBlur: true, //点击删除按钮不执行失去焦点验证

					creditCode: '', //信用代码  商业类型
					creditCodeImg: false,
					creditWidth: '.3rem', // 信用代码的默认宽度
					creditCodeNoBlur: true, //点击删除按钮不执行失去焦点验证

					organizationName: '', //机构名称
					organizationImg: false,
					organizationWidth: '.3rem', // 信用代码的默认宽度
					organizationNoBlur: false,

					organizationLocation: '', //机构地址

					identity: '', //身份证号   深圳类型
					identityImg: false,
					identityWidth: '.3rem', // 默认宽度
					identityNoBlur: true, //点击删除按钮不执行失去焦点验证

					socialSecurity: '', //社保号
					socialSecurityImg: false,
					socialSecurityWidth: '.3rem', // 默认宽度
					socialSecurityNoBlur: true //点击删除按钮不执行失去焦点验证

				});

				try {
					document.querySelector('.choiceColour').className = 'am-list-extra';
					document.querySelector('.am-list-extra').innerHTML = '请选择户籍';
				} catch (err) {
				}

				// let getData={
				// 	provinceId:440000,
				// 	bizType: check=='sz'?2:1
				// }
				// this.props.dispatch(getAddAddress(getData))

				let postData = {
					bizProvinceId: 440000,
					bizType: currentIndex
				}
				this.getRegionType(postData, postData.bizType == 1 ? true : false, true) //获得香港 澳门种类  true 不显示一年多次  第三个参数为了每次选择签注类别，更新地区种类类别

				Popup.hide(); //隐藏
			}
		};
		const y = scrollY
		Popup.show(<FooterAlertMask {...props} />, { animationType: 'slide-up' });
		scrollTo(undefined, y)
	}

	/*
	 *   香港地区签注类别 mask
	 *   name 签注名
	 *   index 下标接口需要的参数
	 *   check  区分签注类别 1香港 2澳门
	 *   visaIndex 选择的状态
	 * */
	showHKMask() {
		let props = {
			regionDataType: this.state.hkDataType,
			index: this.state.hkIndex,   //默认选项
			choose: (name, currentIndex, times, index) => {
				if (this.state.visaType == 'spouse') {
					this.setState({
						hkName: name == this.state.hkName ? '请选择香港签注种类' : name == -1 ? '请选择香港签注种类' : name,
						hkIndex: index == this.state.hkIndex ? -1 : index,   //选择的下标
						hkSelection: times, //选择的选项,后台需要的参数
						hkType: index == this.state.hkIndex ? false : times == 'cl' ? false : true,   //点击取消和相同的按钮字体颜色变浅，默认再次选择
						//夫妻类型只能选择一种类型
						amName: '请选择澳门签注种类',
						amIndex: -1,
						amSelection: 0, //选择的选项
						amType: false   //点击取消和相同的按钮字体颜色变浅，默认再次选择
					});
				} else {
					this.setState({
						hkName: name == this.state.hkName ? '请选择香港签注种类' : name == -1 ? '请选择香港签注种类' : name,
						hkIndex: index == this.state.hkIndex ? -1 : index,   //选择的下标
						hkSelection: times, //选择的选项
						hkType: index == this.state.hkIndex ? false : times == 'cl' ? false : true   //点击取消和相同的按钮字体颜色变浅，默认再次选择
					});
				}
				Popup.hide(); //隐藏
			}
		};
		const y = scrollY
		Popup.show(<FooterRegionAlertMask {...props} />, { animationType: 'slide-up' });
		scrollTo(undefined, y)
	}

	/*
	 *   澳门地区签注类别 mask
	 *   name 签注名
	 *   index 下标接口需要的参数
	 *   amType  字体深灰色
	 *   visaIndex 选择的状态
	 * */
	showAMMask() {
		let props = {
			regionDataType: this.state.amDataType,
			index: this.state.amIndex,  //默认选项
			choose: (name, currentIndex, times, index) => {

				if (this.state.visaType == 'spouse') {
					this.setState({
						amName: name == this.state.amName ? '请选择澳门签注种类' : name == -1 ? '请选择澳门签注种类' : name,
						amIndex: index == this.state.amIndex ? -1 : index,
						amSelection: times, //选择的选项
						amType: index == this.state.amIndex ? false : times == 'cl' ? false : true,   //点击取消和相同的按钮字体颜色变浅，默认再次选择

						//夫妻类型只能选择一种类型
						hkName: '请选择香港签注种类',
						hkIndex: -1,   //选择的下标
						hkSelection: 0, //选择的选项
						hkType: false  //点击取消和相同的按钮字体颜色变浅，默认再次选择
					});
				} else {
					this.setState({
						amName: name == this.state.amName ? '请选择澳门签注种类' : name == -1 ? '请选择澳门签注种类' : name,
						amIndex: index == this.state.amIndex ? -1 : index,
						amSelection: times, //选择的选项
						amType: index == this.state.amIndex ? false : times == 'cl' ? false : true   //点击取消和相同的按钮字体颜色变浅，默认再次选择
					});
				}
				Popup.hide(); //隐藏
			}
		};
		const y = scrollY;
		Popup.show(<FooterRegionAlertMask {...props} />, { animationType: 'slide-up' });
		scrollTo(undefined, y)
	}


	/*
	 *   人员类别 mask
	 *   name 签注名
	 *   index 下标接口需要的参数
	 *   amType  字体深灰色
	 *   visaIndex 选择的状态
	 * */
	showPersonnelMask() {
		let props = {
			index: this.state.personnelIndex,  //默认选项
			type: 'sz',
			choose: (name, currentIndex, check, index) => {
				this.setState({
					personnelName: name,
					personnelType: check,
					personnelIndex: index
				});
				Popup.hide(); //隐藏
			}
		};
		const y = scrollY;
		Popup.show(<FooterAlertMask {...props} />, { animationType: 'slide-up' });
		scrollTo(undefined, y)
	}

	/*
	*  提交表单，办理订单
	* */
	subMitForm(toUrl) {
		let state = this.state,
			cacheAddress;
		// let cacheAddress = this.props.defaultAddress&&this.props.isShowChice? this.props.defaultAddress:
		// 	JSON.parse(localStorage.getItem('choiceAddress'))?JSON.parse(localStorage.getItem('choiceAddress')):'';  //进入地址列表缓存的地址信息  选择地址的缓存
		if (!this.props.isShowChice) {
			cacheAddress = JSON.parse(sessionStorage.getItem('choiceAddress'))
		} else {
			cacheAddress = this.props.defaultAddress && this.props.isShowChice ? this.props.defaultAddress :
				JSON.parse(sessionStorage.getItem('choiceAddress')) ? JSON.parse(sessionStorage.getItem('choiceAddress')) : '';  //进入地址列表缓存的地址信息  选择地址的缓存

			sessionStorage.setItem('choiceAddress', JSON.stringify(cacheAddress))
		}
		let currentPass = this.props.passList[this.state.selectedIndex]; //当前证件信息 null为没有通行证，不滑动默认取第0个
		/*
		*   表单校验
		* */

		let idCardRule2 = /^[0-9]{17}([0-9]|X|x)$/,
			creditCode1 = /^[0-9a-zA-Z]{9,18}$/,
			nameRule1 = /^[\u4e00-\u9fa5]{2,12}$/;

		if (currentPass == undefined) {
			Toast.info('请添加通行证', 1)
			return;
		}
		if (state.visaType == 'free') {

			if (!state.registerValue[0]) {
				Toast.info('请选择户籍所在地', 1);
				return;
			} else if (state.hkIndex == -1 && state.amIndex == -1) {
				Toast.info('请选择香港签注种类', 1);
				return;
			} else if (!cacheAddress.contactName) {
				Toast.info('请选择收件人信息', 1);
				return;
			} else if (!state.isAgree) {
				Toast.info('请阅读并同意《港澳通行证签注办理须知》', 1);
				return;
			}
		} else if (state.visaType == 'again') {

			if (state.cardId == '') {
				Toast.info('请输入身份证号', 1);
				return;
			} else if (state.creditCode == '') {
				Toast.info('请输入组织机构代码或统一社会信用代码', 1);
				return;
			} else if (!creditCode1.test(state.creditCode)) {
				Toast.info('组织机构代码或统一社会信用代码格式有误', 1);
				return;
			} else if (state.organizationName == '') {
				Toast.info('请输入单位组织机构名称', 1);
				return;
			} else if (!state.regionValue[0]) {
				Toast.info('请输入单位组织所在地', 1);
				return;
			} else if (!cacheAddress.contactName) {
				Toast.info('请选择收件人信息', 1);
				return;
			} else if (state.hkIndex == -1) {
				Toast.info('请选择香港签注种类', 1);
				return;
			} else if (!state.isAgree) {
				Toast.info('请阅读并同意《港澳通行证签注办理须知》', 1)
				return;
			}
		} else if (state.visaType == 'spouse') {

			if (!state.registerValue[0]) {
				Toast.info('请选择户籍所在地', 1);
				return;
			} else if (state.cardId == '') {
				Toast.info('请输入身份证号', 1)
				return;
			} else if (!idCardRule2.test(state.cardId)) {
				Toast.info('身份证号有误', 1)
				return;
			} else if (state.name == '') {
				Toast.info('请输入配偶姓名', 1)
				return;
			} else if (!nameRule1.test(state.name)) {
				Toast.info('输入的姓名格式有误', 1)
				return;
			} else if (state.hkIndex == -1 && state.amIndex == -1) {
				Toast.info('请选择香港签注种类', 1);
				return;
			} else if (!cacheAddress.contactName) {
				Toast.info('请选择收件人信息', 1);
				return;
			} else if (!state.isAgree) {
				Toast.info('请阅读并同意《港澳通行证签注办理须知》', 1)
				return;
			}
		} else if (state.visaType == 'sz') {

			if (!state.registerValue[0]) {
				Toast.info('请选择户籍所在地', 1);
				return;
			} else if (state.identity == '') {
				Toast.info('请输入身份证号', 1)
				return;
			} else if (!idCardRule2.test(state.identity)) {
				Toast.info('身份证号有误', 1)
				return;
			} else if (state.hkIndex == -1 && state.amIndex == -1) {
				Toast.info('请选择香港签注种类', 1);
				return;
			} else if (!cacheAddress.contactName) {
				Toast.info('请选择收件人信息', 1);
				return;
			} else if (!state.isAgree) {
				Toast.info('请阅读并同意《港澳通行证签注办理须知》', 1)
				return;
			}
		}

		let address = {
			id: cacheAddress.provinceId,  //地址id，数据库主键标识
			provinceId: cacheAddress.provinceId,   //省份id
			cityId: cacheAddress.cityId, //地市id
			countyId: cacheAddress.countyId,//区县id  441825 不能办理
			street: cacheAddress.street, //街道详细地址
			fullAddr: cacheAddress.fullAddr, //'广东省清远市 连山壮族瑶族自治县 我们自己都江堵救灾', //完整地址
			contactName: cacheAddress.contactName, //收件人
			cellNum: cacheAddress.cellNum  //收件人联系号码

		};

		/*
		*   // category 目的地类型：1-香港，2-澳门
		*  //  times  周期次数：1:三月一次;2:三月两次;3:三月多次;4:一年一次;5:一年两次;6:一年多次
		* */
		let categoryType = state.visaType == 'again' ?
			[{ category: 1, times: state.hkSelection }] :
			state.visaType == 'free' && state.hkIndex == -1 ?
			[{ category: 2, times: state.amSelection }] :
			state.visaType == 'free' && state.amIndex == -1 ?
			[{ category: 1, times: state.hkSelection }] :
			state.visaType == 'spouse' && state.hkIndex == -1 ?
			[{ category: 2, times: state.amSelection }] :
			state.visaType == 'spouse' && state.amIndex == -1 ?
			[{ category: 1, times: state.hkSelection }] :
			state.visaType == 'sz' && state.hkIndex == -1 ?
			[{ category: 2, times: state.amSelection }] :
			state.visaType == 'sz' && state.amIndex == -1 ?
			[{ category: 1, times: state.hkSelection }] :
			[{ category: 1, times: state.hkSelection },
			{ category: 2, times: state.amSelection }];

		let enObj = '';
		switch (state.visaType) {
			case 'free': //自由行
				enObj = {
					type: 1,
					passId: currentPass.id, //证件id,
					passCode: currentPass.passCode, //证件号码
					passName: currentPass.passName,  //证件人名称
					passNameX: currentPass.passNameX,  //证件人名称，姓
					passNameM: currentPass.passNameM,  //证件人名称，名
					birthday: currentPass.birthday, //生日
					validateEnd: currentPass.validateEnd, //有效期

					provinceId: state.registerValue[0].split(',')[1] || state.provinceId, //省份ID
					cityId: state.registerValue[1].split(',')[1] || state.cardId, //户籍所属城市ID
					countyId: state.registerValue[2].split(',')[1] || currentPass.issueProvinceId, //户籍所属地区ID
					//birthCode: '523000', //户籍地编码
					birthPlace: state.registerValue[0].split(',')[0] + state.registerValue[1].split(',')[0] + state.registerValue[2].split(',')[0].replace(null, ''), //户籍所在地+++
					needInvoice: state.isCheck ? 1 : 0 //是否需要发票  1-需要 0-不需要
				}
				break;
			case 'again': //商务
				enObj = {
					type: 3,
					passId: currentPass.id, //证件id,
					passCode: currentPass.passCode, //证件号码
					passName: currentPass.passName,  //证件人名称
					passNameX: currentPass.passNameX,  //证件人名称，姓
					passNameM: currentPass.passNameM,  //证件人名称，名
					birthday: currentPass.birthday, //生日
					validateEnd: currentPass.validateEnd, //有效期

					// provinceId: currentPass.issueProvinceId, //省份ID
					// cityId: currentPass.cityId, //户籍所属城市ID
					// countyId: currentPass.issueProvinceId, //户籍所属地区ID
					//birthCode: '523000', //户籍地编码
					// birthPlace:state.registerValue[0].split(',')[0]+state.registerValue[1].split(',')[0]+state.registerValue[2].split(',')[0], //户籍所在地+++


					idCardNo: state.cardId, //身份证号码

					orgNbr: state.creditCode, //组织机构代码，只在选择商务出行时生效

					orgName: this.state.organizationName, //组织名称

					provinceId: state.regionValue[0].split(',')[1] || state.provinceId, //省份ID
					cityId: state.regionValue[1].split(',')[1] || state.cardId, //户籍所属城市ID
					countyId: state.regionValue[2].split(',')[1] || currentPass.issueProvinceId, //户籍所属地区ID

					orgPlace: state.regionValue[0].split(',')[0] + state.regionValue[1].split(',')[0] + state.regionValue[2].split(',')[0].replace(null, ''), //组织所在地
					needInvoice: state.isCheck ? 1 : 0 //是否需要发票  1-需要 0-不需要
				}
				break;
			case 'spouse': //夫妻游
				enObj = {
					type: 4,
					passId: currentPass.id, //证件id,
					passCode: currentPass.passCode, //证件号码
					passName: currentPass.passName,  //证件人名称
					passNameX: currentPass.passNameX,  //证件人名称，姓
					passNameM: currentPass.passNameM,  //证件人名称，名
					birthday: currentPass.birthday, //生日
					validateEnd: currentPass.validateEnd, //有效期

					provinceId: state.registerValue[0].split(',')[1], //省份ID
					cityId: state.registerValue[1].split(',')[1], //户籍所属城市ID
					countyId: state.registerValue[2].split(',')[1], //户籍所属地区ID

					//birthCode: '523000', //户籍地编码
					birthPlace: state.registerValue[0].split(',')[0] + state.registerValue[1].split(',')[0] + state.registerValue[2].split(',')[0].replace(null, ''), //户籍所在地+++
					needInvoice: state.isCheck ? 1 : 0, //是否需要发票  1-需要 0-不需要

					idCardNo: state.cardId, //身份证号码
					spouseName: state.name //配偶姓名，只在选择夫妻探亲时生效

				}
				break;
			case 'sz':  //非广东户籍深圳人员个人游

				enObj = {
					type: 5,
					passId: currentPass.id, //证件id,
					passCode: currentPass.passCode, //证件号码
					passName: currentPass.passName,  //证件人名称
					passNameX: currentPass.passNameX,  //证件人名称，姓
					passNameM: currentPass.passNameM,  //证件人名称，名
					birthday: currentPass.birthday, //生日
					validateEnd: currentPass.validateEnd, //有效期

					provinceId: state.registerValue[0].split(',')[1], //省份ID
					cityId: state.registerValue[1].split(',')[1], //户籍所属城市ID
					countyId: state.registerValue[2].split(',')[1], //户籍所属地区ID
					//birthCode: '523000', //户籍地编码

					needInvoice: state.isCheck ? 1 : 0, //是否需要发票  1-需要 0-不需要

					// personType: state.personnelType=='college'? 3:1,  //深圳非广东  人员类型1：就业人员，3：高校大学生
					idCardNo: state.identity, //身份证号码
					birthPlace: state.registerValue[0].split(',')[0] + state.registerValue[1].split(',')[0] + state.registerValue[2].split(',')[0].replace(null, ''), //户籍所在地+++

					// sbNbr: state.personnelType=='college'?'':state.socialSecurity, //深圳非广东社保号码  高校大学生是没有社保号 传空

					// nation: getFamilyCode.lookFamilyCode(JSON.parse(sessionStorage.getItem('familyName'))).code,  //传民族编号
					//
					// nationName: JSON.parse(sessionStorage.getItem('familyName'))||''  //民族

				}
		}

		let postData = {
			endorseInfoList: [{
				"endorseInfoObj": JSON.stringify(enObj),
				"address": JSON.stringify(address),
				"items": JSON.stringify(categoryType)
			}]
		};

		sessionStorage.setItem('pay_data', JSON.stringify(postData));  //缓存支付页面用

		let data = {
			objStr: JSON.stringify(postData),
		};

		this.props.dispatch(subMitForm(data, (res) => {
			if (!res.canHandler) {   //清远市某些地区不能办理，提示mask
				this.setState({
					emsSitesList: res.emsSites,
					isShowMask: true
				})
			} else {
				sessionStorage.setItem('checkout_success_data', JSON.stringify(res)); //支付页面的数据
				setTimeout(() => { this.toUrl(toUrl) }, 50)
			}
		}))

		//console.log('默认选中的证件33',this.props.passList[this.state.selectedIndex])  //如果是 undefined说明咩有证件应该添加

	}

	/*
	*   是否需要发票
	* */
	isChecked(checked) {
		this.setState({
			isCheck: checked
		});
	}

	/*
	*   是否同意协议
	* */
	isAgreeState() {
		this.setState({
			isAgree: !this.state.isAgree
		});
	}

	/*
	*   显示协议文案mask
	* */
	isShowAgreement() {
		this.setState({
			isShowAgree: !this.state.isShowAgree
		});
	}

	toUrl(url) {
		this.context.router.push(url);
	}

	//构建通行证走马灯
	structureSlider() {
		let data = [];
		for (let i = 0; i < this.props.passList.length; i++) {
			if (this.props.passList) {
				data.push(<PassItem res={this.props.passList[i]} key={i} index={i} currentIndex={this.state.selectedIndex} />)
			}
		}
		//添加通行证入口
		data.push(<PassAddNumber key={this.props.passList.length} />)
		return data
	}

	//隐藏清远地区提示mask
	hideMask() {
		this.setState({
			isShowMask: !this.state.isShowMask
		})
	}

	toAddressList() {
		sessionStorage.setItem('scrollTop', document.body.scrollTop)
		setTimeout(() => { this.toUrl('addressList') }, 0)

	}

	render() {
		let cacheAddress,
			visaType = this.state.visaType,
			addressStatus = false;

		if (!this.props.isShowChice) {
			cacheAddress = JSON.parse(sessionStorage.getItem('choiceAddress'))
		} else {
			cacheAddress = this.props.defaultAddress && this.props.isShowChice ? this.props.defaultAddress :
				JSON.parse(sessionStorage.getItem('choiceAddress')) ? JSON.parse(sessionStorage.getItem('choiceAddress')) : '';  //进入地址列表缓存的地址信息  选择地址的缓存

			sessionStorage.setItem('choiceAddress', JSON.stringify(cacheAddress))
		}
		//console.log('state-------------------------',this.state)

		//通过省份ID获取地址列表
		//类型0/查询所有地区数据 1/查询某个地区数据 2/表示查询不包含某个地区的数据
		if (sessionStorage.getItem('handleItem')) {
			let handLeItem = JSON.parse(sessionStorage.getItem('handleItem'));
			addressStatus = handLeItem.endorseInfoObj.type == 5 ? true : false
		}

		// let addressArr = getAddressCode.getLookUpCode('湖北省咸宁市赤壁市');  //返回数组的形式
		// console.log(addressArr)

		return (
			<div>
				<div className={style.home}>
					<div className={style.sliderTitle}>选择通行证</div>
					<div className={style.sliderContainer}>
						<div className={style.carouselContainer}>
							<Carousel className="my-carousel"
								autoplay={false}
								dots={false}
								infinite
								selectedIndex={this.state.selectedIndex}
								swipeSpeed={35}
								beforeChange={(from, to) => console.log(`slide from ${from} to ${to}`)}  //切换面板前的回调函数
								afterChange={index => {   //切换面板后的回调函数
									this.getCurrentCar(index)
								} }
								>
								{
									this.structureSlider()
								}
							</Carousel>
						</div>
					</div>

					<div style={{ height: '.24rem' }}></div>

					<Title text='请选择旅游签注类别' isLine={true} />
					<div className={style.passTypeCheck} onClick={() => { this.showVisaMask() } }>
						<span>{this.state.visaName}</span>
						<img className={style.iconToRight} src="./images/icon_to_r.png" alt="" />
					</div>

					<div style={{ height: '.24rem' }}></div>
					{
						visaType == 'again' ? null : <Title text='个人信息' isLine={true} />
					}

					<div className={style.register} >
						<div className={style.pickerLine} style={this.state.visaType == 'again' ? { display: 'none' } : {}}>
							<Picker extra="请选择户籍" data={this.state.visaType == 'sz' ? nogdAddressData.value : this.state.visaType == 'free' || this.state.visaType == 'spouse' ? gdAddressData.value : addressStatus ? nogdAddressData.value : gdAddressData.value}//this.props.provinceList  //this.state.visaType=='sz'||addressStatus?nogdAddressData.value:gdAddressData.value
								format={(values) => { { return values.join(''); } } }
								title="选择地区"
								value={this.state.registerValue}
								onChange={(v) => {
									let bizIndex;

									if (sessionStorage.getItem('currentIndex')) {
										bizIndex = sessionStorage.getItem('currentIndex')
									} else {
										bizIndex = this.state.visaType == 'free' ? 1 : this.state.visaType == 'again' ? 3 : this.state.visaType == 'spouse' ? 4 : this.state.visaType == 'sz' ? 5 : 0;   //如果缓存为空，取自由行

									}

									try {
										document.querySelectorAll('.am-list-extra')[0].className = 'choiceColour';  //勾选后改变字体变深
									} catch (error) { }
									this.setState({ registerValue: v })
									if (v[1].indexOf('深圳') > -1) {
										let postData = {
											bizProvinceId: 440000,
											bizType: bizIndex
										}

										this.getRegionType(postData, false); //如果是深圳用户显示一年多次
									} else {
										let postData = {
											bizProvinceId: 440000,
											bizType: bizIndex   //如果缓存为空，取自由行
										}
										this.getRegionType(postData, true); //true不显示一年多次
										if (this.state.hkName == '一年多次') { //先选深圳地区选一年多次，再选非深圳第地区，清空
											this.setState({
												hkType: '',    //字体颜色
												hkName: '请选择香港签注种类',  //默认文字
												hkSelection: '', //选项
												hkIndex: -1  //点击香港地区签注种类的选项下标
											})
										}

										let handLeItem = JSON.parse(sessionStorage.getItem('handleItem'));
										if (handLeItem && handLeItem.endorseInfoObj.type == 1 && handLeItem.endorseInfoObj.birthPlace.indexOf('深圳') > -1 && this.state.hkName == '一年多次') {
											this.setState({
												hkType: '',    //字体颜色
												hkName: '请选择香港签注种类',  //默认文字
												hkSelection: '', //选项
												hkIndex: -1  //点击香港地区签注种类的选项下标
											})
										}
									}

								} }
								>
								<List.Item arrow="horizontal"><span style={{ fontSize: '.32rem' }}>户&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;籍</span></List.Item>
							</Picker>
							<img className={style.iconToRight} src="./images/icon_to_r.png" alt="" />
						</div>

						{/*根据选择的签注类别渲染信息#默认是自由行*/}
						{
							visaType == 'spouse' ?  //夫妻
								<div>
									<InputItem type="text" index='2' itemText="身份证号" maxLength="18" placeHolder="请输入身份证号" id='cardId'
										value={this.state.cardId} showUnderLine={true} showTagText={true} creditCodeImg={this.state.cardIdImg} creditWidth={this.state.cardIdWidth}
										onClick={() => {
											this.setState({
												cardId: '',
												cardIdImg: 'hideDelete',
												cardIdNoBlur: false
											})
											document.querySelector('#cardId').focus()
										} }
										onBlur={(event) => {
											let res = event.target.value;
											this.setState({ cardIdNoBlur: true });
											setTimeout(() => {
												if (!this.state.cardIdNoBlur) return;  //点击删除按钮不执行验证
												let value = res,
													idCardRule1 = /^[0-9]{14}([0-9]|X|x)$/,
													idCardRule2 = /^[0-9]{17}([0-9]|X|x)$/;

												if (value == '') {
													this.setState({
														cardIdImg: '',
													});
												} else if (idCardRule1.test(value)) {
													this.setState({
														cardIdImg: 'correct',
														cardIdWidth: '.4rem'
													});
												} else if (idCardRule2.test(value)) {
													this.setState({
														cardIdImg: 'correct',
														cardIdWidth: '.4rem'
													});
												} else {
													this.setState({
														cardIdWidth: '.4rem',
														cardIdImg: 'error'
													})
												}
											}, 0)
										} }

										onFocus={(e) => {
											window.scrollTo(0, 150);
											//document.body.scrollTop = document.body.scrollHeight;
											let value = e.target.value;
											if (value.length != 0 && value == this.state.cardId) {
												this.setState({
													cardIdImg: 'showDelete',
												});
											}

										} }

										onChange={(e) => {
											let value = e.target.value;
											if (value.length > 0 && value != ' ') {
												this.setState({
													cardIdImg: 'showDelete',
													cardId: e.target.value.replace(/(^\s*)|(\s*$)/g, "").replace("x", 'X')
												});
											} else {
												this.setState({
													cardIdImg: 'hideDelete',
													cardId: e.target.value.replace(/(^\s*)|(\s*$)/g, "").replace("x", 'X')
												});
											}
										} } />
									<InputItem type="text" index='2' itemText="配偶姓名" maxLength="12" placeHolder="请输入配偶姓名" id="name"
										value={this.state.name} showUnderLine={false} showTagText={true} creditCodeImg={this.state.nameImg} creditWidth={this.state.nameWidth}
										onClick={() => {
											this.setState({
												name: '',
												nameImg: 'hideDelete',
												nameNoBlur: false
											})
											document.querySelector('#name').focus()
										} }
										onBlur={(event) => {
											let res = event.target.value;
											this.setState({ nameNoBlur: true });
											setTimeout(() => {
												if (!this.state.nameNoBlur) return;  //点击删除按钮不执行验证
												let value = res,
													nameRule1 = /^[\u4e00-\u9fa5]{2,12}$/;

												if (value == '') {
													this.setState({
														nameImg: '',
													});
												} else if (nameRule1.test(value)) {
													this.setState({
														nameImg: 'correct',
														nameWidth: '.4rem'
													});
												} else {
													this.setState({
														nameWidth: '.4rem',
														nameImg: 'error'
													})
												}
											}, 0)
										} }

										onFocus={(e) => {
											window.scrollTo(0, 170);
											let value = e.target.value;
											if (value.length != 0 && value == this.state.name) {
												this.setState({
													nameImg: 'showDelete',
												});
											}
										} }

										onChange={(e) => {
											let value = e.target.value;
											if (value.length > 0 && value != ' ') {
												this.setState({
													nameImg: 'showDelete',
													name: e.target.value.replace(/(^\s*)|(\s*$)/g, "")
												});
											} else {
												this.setState({
													nameImg: 'hideDelete',
													name: e.target.value.replace(/(^\s*)|(\s*$)/g, "")
												});
											}
										} } /></div> :
								visaType == 'again' ?
									<div>
										<Title text='个人信息' isLine={true} />
										<InputItem type="text" index='2' itemText="身份证号" maxLength="18" placeHolder="请输入身份证号" id='cardId'
											value={this.state.cardId} showUnderLine={true} showTagText={true} creditCodeImg={this.state.cardIdImg} creditWidth={this.state.cardIdWidth}
											onClick={() => {
												this.setState({
													cardId: '',
													cardIdImg: 'hideDelete',
													cardIdNoBlur: false
												})
												document.querySelector('#cardId').focus()
											} }

											onBlur={(event) => {
												let res = event.target.value;
												this.setState({ cardIdNoBlur: true });
												setTimeout(() => {
													if (!this.state.cardIdNoBlur) return;  //点击删除按钮不执行验证
													let value = res,
														idCardRule1 = /^[0-9]{14}([0-9]|X|x)$/,
														idCardRule2 = /^[0-9]{17}([0-9]|X|x)$/;

													if (value == '') {
														this.setState({
															cardIdImg: '',
														});
													} else if (idCardRule1.test(value)) {
														this.setState({
															cardIdImg: 'correct',
															cardIdWidth: '.4rem'
														});
													} else if (idCardRule2.test(value)) {
														this.setState({
															cardIdImg: 'correct',
															cardIdWidth: '.4rem'
														});
													} else {
														this.setState({
															cardIdWidth: '.4rem',
															cardIdImg: 'error'
														})
													}
												}, 0)
											} }

											onFocus={(e) => {
												window.scrollTo(0, 150);
												let value = e.target.value;
												if (value.length != 0 && value == this.state.cardId) {
													this.setState({
														cardIdImg: 'showDelete',
													});
												}
											} }

											onChange={(e) => {
												let value = e.target.value;
												if (value.length > 0 && value != ' ') {
													this.setState({
														cardIdImg: 'showDelete',
														cardId: e.target.value.replace(/(^\s*)|(\s*$)/g, "").replace("x", 'X')
													});
												} else {
													this.setState({
														cardIdImg: 'hideDelete',
														cardId: e.target.value.replace(/(^\s*)|(\s*$)/g, "").replace("x", 'X')
													});
												}
											} } />

										<div style={{ height: '.24rem' }}></div>
										<Title text='单位组织信息' isLine={true} />
										<InputItem type="text" index='2' itemText="" maxLength="18" placeHolder="请输入组织机构代码或统一社会信用代码"
											value={this.state.creditCode} showUnderLine={true} showTagText={false} creditCodeImg={this.state.creditCodeImg}
											creditWidth={this.state.creditWidth} id="creditCode"
											onClick={() => {
												this.setState({
													creditCode: '',
													creditCodeImg: 'hideDelete',
													creditCodeNoBlur: false
												})
												document.querySelector('#creditCode').focus();
											} }
											onBlur={(event) => {
												let res = event.target.value;
												this.setState({ creditCodeNoBlur: true });
												setTimeout(() => {
													if (!this.state.creditCodeNoBlur) return;  //点击删除按钮不执行验证
													let value = res,
														idCardRule1 = /^[0-9a-zA-Z]{9,18}$/;
													if (value == '') {
														this.setState({
															creditCodeImg: '',
														});
													} else if (idCardRule1.test(value)) {
														this.setState({
															creditCodeImg: 'correct',
															creditWidth: '.4rem'
														});
													} else {
														this.setState({
															creditWidth: '.4rem',
															creditCodeImg: 'error'
														})
													}
												}, 0)
											} }

											onFocus={(e) => {
												window.scrollTo(0, 160);
												let value = e.target.value;
												if (value.length != 0 && value == this.state.creditCode) {
													this.setState({
														creditCodeImg: 'showDelete',
													});
												}
											} }

											onChange={(e) => {
												let value = e.target.value;
												if (value.length > 0 && value != ' ') {
													this.setState({
														creditCodeImg: 'showDelete',
														creditCode: e.target.value.replace(/(^\s*)|(\s*$)/g, "")
													});
												} else {
													this.setState({
														creditCodeImg: 'hideDelete',
														creditCode: e.target.value.replace(/(^\s*)|(\s*$)/g, "")
													});
												}
											} } />
										<InputItem type="text" index='2' itemText="" maxLength="60" placeHolder="请输入单位组织机构名称"
											value={this.state.organizationName} showUnderLine={true} showTagText={false} creditCodeImg={this.state.organizationImg}
											creditWidth={this.state.organizationWidth} id="organizationName"
											onClick={() => {
												this.setState({
													organizationName: '',
													organizationImg: 'hideDelete',
													organizationNoBlur: false
												})
												document.querySelector('#organizationName').focus();
											} }
											onBlur={(event) => {
												let res = event.target.value;
												this.setState({ organizationNoBlur: true });
												setTimeout(() => {
													if (!this.state.organizationNoBlur) return;  //点击删除按钮不执行验证
													let value = res,
														organizationRule = /\.\d\d$/;

													if (value == '') {
														this.setState({
															organizationImg: '',
														});
													} else if (!organizationRule.test(value) && value.length >= 2) {
														this.setState({
															organizationImg: 'correct',
															organizationWidth: '.4rem'
														});
													} else {
														this.setState({
															organizationWidth: '.4rem',
															organizationImg: 'error'
														})
													}
												}, 0)
											} }
											onFocus={(e) => {
												window.scrollTo(0, 170);
												let value = e.target.value;
												if (value.length != 0 && value == this.state.organizationName) {
													this.setState({
														organizationImg: 'showDelete',
													});
												}
											} }
											onChange={(e) => {
												let value = e.target.value;
												if (value.length > 0 && value != ' ') {
													this.setState({
														organizationImg: 'showDelete',
														organizationName: e.target.value.replace(/(^\s*)|(\s*$)/g, "")
													});
												} else {
													this.setState({
														organizationImg: 'hideDelete',
														organizationName: e.target.value.replace(/(^\s*)|(\s*$)/g, "")
													});
												}
											} }
											/>
										<div className={style.pickerLine}>
											<Picker extra="请选择单位组织所在地" data={gdAddressData.value}//this.props.provinceList
												format={(values) => { { return values.join('') } } }
												title="选择地区"
												value={this.state.regionValue}//regionValue
												onChange={(v) => {
													this.setState({ regionValue: v })
													try {
														let am_list_extra = document.querySelectorAll('.am-list-extra');
														if (am_list_extra.length == 3) {
															am_list_extra[1].className = 'choiceColour';
														} else if (am_list_extra.length == 2) {
															am_list_extra[1].className = 'choiceColour';
														}
													} catch (error) { }

												} }
												>
												<List.Item arrow="horizonta2"></List.Item>
											</Picker>
											<img className={style.iconToRight} src="./images/icon_to_r.png" alt="" />
										</div>
									</div> :
									visaType == 'sz' ?
										<div>
											{/*<div className={style.personnel} onClick={()=>{this.showPersonnelMask()}}>*/}
											{/*<div className={style.personnelTag}>人员类别</div>*/}
											{/*<div className={style.personnelStyle} style={this.state.personnelType?{color:'#6a6a6a'}:{}}>{this.state.personnelName}</div>*/}
											{/*<img className={style.iconToRight} src="./images/icon_to_r.png" alt=""/>*/}
											{/*</div>*/}

											<InputItem type="text" index='2' itemText="身份证号" maxLength="18" placeHolder="请输入身份证号" id="identity"
												value={this.state.identity} showUnderLine={true} showTagText={true} creditCodeImg={this.state.identityImg} creditWidth={this.state.identityWidth}
												onClick={() => {
													this.setState({
														identity: '',
														identityImg: 'hideDelete',
														identityNoBlur: false
													})
													document.querySelector('#identity').focus();
												} }
												onBlur={(event) => {
													let res = event.target.value;
													this.setState({ identityNoBlur: true });
													setTimeout(() => {
														if (!this.state.identityNoBlur) return;  //点击删除按钮不执行验证
														let value = res,
															idCardRule1 = /^[0-9]{14}([0-9]|X|x)$/,
															idCardRule2 = /^[0-9]{17}([0-9]|X|x)$/;

														if (value == '') {
															this.setState({
																identityImg: '',
															});
														} else if (idCardRule1.test(value)) {
															this.setState({
																identityImg: 'correct',
																identityWidth: '.4rem'
															});
														} else if (idCardRule2.test(value)) {
															this.setState({
																identityImg: 'correct',
																identityWidth: '.4rem'
															});
														} else {
															this.setState({
																identityWidth: '.4rem',
																identityImg: 'error'
															})
														}
													}, 0)
												} }

												onFocus={(e) => {
													window.scrollTo(0, 170);
													let value = e.target.value;
													if (value.length != 0 && value == this.state.identity) {
														this.setState({
															identityImg: 'showDelete',
														});
													}
												} }

												onChange={(e) => {
													let value = e.target.value;
													if (value.length > 0) {
														this.setState({
															identityImg: 'showDelete',
															identity: e.target.value.replace(/(^\s*)|(\s*$)/g, "").replace("x", 'X')
														});
													} else {
														this.setState({
															identityImg: 'hideDelete',
															identity: e.target.value.replace(/(^\s*)|(\s*$)/g, "").replace("x", 'X')
														});
													}
												} } />
											{/*学生隐藏社保号框*/}
											{/*<div style={this.state.personnelType=='college'?{display: 'none'}:{}}>*/}
											{/*<InputItem type="text" index='2' itemText="社&nbsp;&nbsp;保&nbsp;号" maxLength="10" placeHolder="请输入社保号" id="socialSecurity"*/}
											{/*value={this.state.socialSecurity} showUnderLine={true} showTagText={true} creditCodeImg={this.state.socialSecurityImg} creditWidth = {this.state.socialSecurityWidth}*/}
											{/*onClick={()=>{*/}
											{/*this.setState({*/}
											{/*socialSecurity: '',*/}
											{/*socialSecurityImg: 'hideDelete',*/}
											{/*socialSecurityNoBlur: false*/}
											{/*})*/}
											{/*document.querySelector('#socialSecurity').focus();*/}
											{/*}}*/}
											{/*onBlur={(event)=>{*/}
											{/*let res = event.target.value;*/}
											{/*this.setState({socialSecurityNoBlur: true});*/}
											{/*setTimeout(()=>{*/}
											{/*if(!this.state.socialSecurityNoBlur) return;  //点击删除按钮不执行验证*/}
											{/*let value = res,*/}
											{/*socialSecurityRule1=/^[0-9a-zA-Z]{2,10}$/;*/}
											{/*/!*socialSecurityRule1=/^[a-zA-Z\u4e00-\u9fa5\s]{1,20}$/;*!/*/}
											{/*if(value == ''){*/}
											{/*this.setState({*/}
											{/*socialSecurityImg: '',*/}
											{/*});*/}
											{/*}else if(socialSecurityRule1.test(value)){*/}
											{/*this.setState({*/}
											{/*socialSecurityImg: 'correct',*/}
											{/*socialSecurityWidth: '.4rem'*/}
											{/*});*/}
											{/*}else {*/}
											{/*this.setState({*/}
											{/*socialSecurityWidth: '.4rem',*/}
											{/*socialSecurityImg: 'error'*/}
											{/*})*/}
											{/*}*/}
											{/*},0)*/}
											{/*}}*/}

											{/*onFocus={(e)=>{*/}
											{/*let value = e.target.value;*/}
											{/*if(value.length!=0&&value==this.state.socialSecurity){*/}
											{/*this.setState({*/}
											{/*socialSecurityImg: 'showDelete',*/}
											{/*});*/}
											{/*}*/}
											{/*}}*/}

											{/*onChange={(e) => {*/}
											{/*let value = e.target.value;*/}
											{/*let socialSecurityRule1=/^[a-zA-Z]+\d{2,10}$/;*/}
											{/*if(value.length>0&&value!=' '){*/}
											{/*this.setState({*/}
											{/*socialSecurityImg: 'showDelete',*/}
											{/*socialSecurity:e.target.value.replace(/[^\w\.\/]/ig,'')*/}
											{/*});*/}
											{/*}else {*/}
											{/*this.setState({*/}
											{/*socialSecurityImg: 'hideDelete',*/}
											{/*socialSecurity: e.target.value.replace(/[^\w\.\/]/ig,'')*/}
											{/*});*/}
											{/*}*/}
											{/*}}/>*/}
											{/*</div>                                       /!*此处防止input失去焦点事件没有完成*!/*/}
											{/*<div className={style.family} onClick={()=>{setTimeout(()=>{this.toUrl('familyDemo')},0)}}>*/}
											{/*<div className={style.familyTag}>民&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;族</div>*/}
											{/*<div className={style.familyStyle} style={this.state.familyNameType?{color:'#6a6a6a'}:{}}>{this.state.familyName}</div>*/}
											{/*<img className={style.iconToRight} src="./images/icon_to_r.png" alt=""/>*/}
											{/*</div>*/}
										</div> : null
						}

					</div>
					<div style={{ height: '.24rem' }}></div>
					<Title text='选择前往地区及签注种类' isLine={true} />

					<div className={style.regionBox}>
						<div className={style.regionType} onClick={() => { this.showHKMask() } }>
							<img className={style.regionImg} src="./images/hk.png" alt="" />
							<div className={style.regionTag}>香港</div>
							<div className={style.regionStyle} style={this.state.hkType ? { color: '#6a6a6a' } : {}}>{this.state.hkName}</div>
							<img className={style.iconToRight} src="./images/icon_to_r.png" alt="" />
						</div>

						<div className={style.regionType} onClick={() => { this.showAMMask() } } style={this.state.visaType == 'again' ? { display: 'none' } : null}>
							<img className={style.regionImg} src="./images/macao.png" alt="" />
							<div className={style.regionTag}>澳门</div>
							<div className={style.regionStyle} style={this.state.amType ? { color: '#6a6a6a' } : {}}>{this.state.amName}</div>
							<img className={style.iconToRight} src="./images/icon_to_r.png" alt="" />
						</div>

					</div>

					<div style={{ height: '.24rem' }}></div>

					<div className={style.consigneeBox}>
						<img className={style.separateLine} src="./images/line.png" alt="" />
						<Title text='收件人信息' isLine={true} />
						<div onClick={() => { this.toAddressList() } }>
							<div className={style.address}>
								<img className={style.map} src="./images/map.png" alt="" />
								<div className={style.addAddress}>{
									cacheAddress && cacheAddress.fullAddr != '' ? cacheAddress.contactName + ' ' + cacheAddress.cellNum : '添加收件人信息'
								}</div>
								<img className={style.iconToRight} src="./images/icon_to_r.png" alt="" />
							</div>
							{/*中山和东莞没有区传给后台null+cacheAddress.street*/}
							{
								cacheAddress && cacheAddress.fullAddr != '' ? <div className={style.fullAddress}>{cacheAddress.fullAddr.replace(null, '')}</div> : null
							}
						</div>
					</div>

					<div style={{ height: '.24rem' }}></div>

					<div className={style.sliderBox}>
						<div>
							<List.Item
								extra={<Switch
									checked={this.state.isCheck}
									onChange={(checked) => { this.isChecked(checked) } }
									/>}
								>签注发票</List.Item>
						</div>
					</div>
					<div className={style.invoice}>(签注发票由公安出入境部门提供)</div>
					<div style={{ height: '.60rem' }}></div>
					<div className={style.agreeBox}>
						<span onClick={() => { this.isAgreeState() } }>
							<img className={style.agree} src={this.state.isAgree ? './images/agree.png' : './images/noCheck.png'} alt="" />
							<span className={style.determine}>同意</span>
						</span>
						<span className={style.agreeBtn} onClick={() => { this.isShowAgreement() } }>《港澳通行证签注办理须知》</span>
					</div>

					<div className={style.btnBox}>
						<button className={style.handle} type='button' onClick={() => { this.subMitForm('payment') } }>立即办理</button>
						<button className={style.preservation} type='button' onClick={() => { this.subMitForm('handleList') } }>保存，并办理下一个</button>
					</div>

					<div className={style.brief}>
						<img className={style.footLogo} src="./images/img_logo_police.png" alt="" />
						<p className={style.logoMsg}>广东省公安厅出入境管理局</p>
					</div>


					{/*协议--start*/}
					<Agreement isShow={this.state.isShowAgree} visaType={this.state.visaType} onClick={() => { this.isShowAgreement() } } />
					{/*协议--end*/}

					{/*清远地区不能办理证件 mask start*

					<GuideMask
						isShowMask={this.state.isShowMask}
						onClick={() => this.hideMask()}
						emsSitesList={this.state.emsSitesList}
						/>

					{/*清远地区不能办理证件 mask end*/}


				</div>
				{/*底部导航菜单 start*/}
				<FootNav url="handleList" />
				{/*底部导航菜单 end*/}
			</div>
		)
	}
}

//使用context
Home.contextTypes = {
	router: React.PropTypes.object.isRequired
};

Home.defaultProps = {
	passList: [],
	visaList: [],
	defaultAddress: {
		fullAddr: '',
		street: ''
	}
};

function mapStateToProps(state) {
	return Object.assign({}, state.passList, state.addressList, state.defaultAddress);
}

export default connect(mapStateToProps)(Home);

